/* eslint-disable react/no-unescaped-entities */
import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import routes from './routes';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import {Card, Row, Col} from 'antd';
import 'ant-design-pro/dist/ant-design-pro.css';
import NoMatchRoute from '../common/NoMatchRoute';
import WorkItemPanel from './WorkItemPanel';
import CategoryTree from './CategoryTree';
import Add from './Add';
import Detail from './Detail';
import RepairMode from './RepairMode';
import RepairModeEdit from './RepairModeEdit';
import styles from './style.css';

const TREE_CARD_COL_SPAN = {
    xl: 7,
    xxl: 5,
    sm: 8,
    lg: 8
};

const TABLE_CARD_COL_SPAN = {
    xl: 17,
    xxl: 19,
    sm: 16,
    lg: 16
};
export class App extends PureComponent {
    componentDidMount() {
        this.props.init();
    }

    render() {
        return (
            <div>
                <Route render={props => <Breadcrumb location={props.location} />} />
                <div className="page-main">
                    <Switch>
                        <Route path={routes.query.url()} exact render={props =>
                            <Row gutter={16}>
                                <Col {...TREE_CARD_COL_SPAN}><Card className={styles.mainTree}><CategoryTree history={props.history} /></Card></Col>
                                <Col {...TABLE_CARD_COL_SPAN}><Card className={styles.mainTree}>
                                    <WorkItemPanel history={props.history} />
                                </Card></Col>
                            </Row>} />
                        <Route path={routes.detail.url()} exact render={props =>
                            <Detail id={props.match.params.id} history={props.history} />} />
                        <Route path={routes.assist.url()} exact render={props =>
                            <RepairMode history={props.history} />} />
                        <Route path={routes.assistAdd.url()} exact render={props =>
                            <RepairModeEdit history={props.history} />} />
                        <Route path={routes.assistUpdate.url()} exact render={props =>
                            <RepairModeEdit id={props.match.params.id} history={props.history} />} />
                        <Route path={routes.update.url()} exact render={props =>
                            <Add id={props.match.params.id} history={props.history} />} />
                        <NoMatchRoute link={routes.query.url()} />
                    </Switch>
                </div>
            </div>
        );
    }
}
App.propTypes = {
    history: PropTypes.object,
    init: PropTypes.func,
    location: PropTypes.object,
    match: PropTypes.object,
};
import {connect} from 'react-redux';
import {getInitData} from './actions.js';

const mapDispatchToProps = dispatch => ({
    init: () => dispatch(getInitData()),
});

export default connect(
    null,
    mapDispatchToProps
)(App);
